<template>
  <div class="adduser">
    <el-card shadow="never" class="homeTop">
      <el-row>
        <el-col :span="10">
          <div class="addtitle">
            <i class="el-icon-s-custom"></i>
            <span>添加最新用户资料</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="hover" class="addMain">
      <el-row>
        <el-col :span="18" :offset="2">
          <el-form
            :model="adduserForm"
            :rules="adduserRules"
            ref="adduserForm"
            label-width="100px"
            status-icon
          >
            <el-form-item label="客户名称" prop="nickname">
              <el-input v-model.trim="adduserForm.nickname"></el-input>
            </el-form-item>

            <el-form-item label="客户电话" prop="contact">
              <el-input v-model.trim="adduserForm.contact"></el-input>
            </el-form-item>

            <el-form-item label="QQ" prop="qq">
              <el-input v-model.trim="adduserForm.qq"></el-input>
            </el-form-item>

            <el-form-item label="微信" prop="weixin">
              <el-input v-model.trim="adduserForm.weixin"></el-input>
            </el-form-item>

            <el-form-item label="咨询专业" prop="zhuanye">
              <el-input
                placeholder="请输入内容"
                v-model.trim="adduserForm.zhuanye"
              >
                <el-select
                  v-model.trim="adduserForm.infoclass"
                  slot="prepend"
                  placeholder="请选择"
                  class="mySelect"
                >
                  <el-option
                    :value="item.classname"
                    v-for="item in infoClassList"
                    :key="item.id"
                  ></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>

            <el-form-item label="信息来源" prop="laiyuan">
              <el-input v-model.trim="adduserForm.laiyuan"></el-input>
            </el-form-item>

            <el-form-item label="选择客服" prop="kefu">
              <el-select
                v-model.trim="adduserForm.kefu"
                placeholder="请选择"
                multiple
              >
                <el-option
                  :value="item.classname"
                  v-for="item in kefuList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <div style="padding-top: 20px">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-button
                      type="success"
                      style="width: 100%; height: 50px"
                      @click="onSubmit"
                      >确认提交</el-button
                    >
                  </el-col>
                  <el-col :span="3">
                    <el-button
                      style="width: 100%; height: 50px"
                      @click="onReset"
                      >重置</el-button
                    >
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getKefuInfo, addUserRow } from '@/network/networks'
import { dataRules } from '@/assets/js/validator'

export default {
  data () {
    return {
      kefuList: [],
      infoClassList: [],
      adduserForm: {
        nickname: '',
        contact: '',
        qq: '',
        weixin: '',
        laiyuan: '',
        kefu: [],
        zhuanye: '',
        infoclass: ''
      },

      adduserRules: {
        nickname: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ],
        laiyuan: [
          { required: true, message: '请输入信息来源', trigger: 'blur' }
        ],
        zhuanye: [
          { required: true, message: '请输入专业名称', trigger: 'blur' }
        ],
        kefu: [
          { required: true, message: '请输入专业名称', trigger: 'change' }
        ],
        contact: [{ validator: dataRules, trigger: 'blur' }],

        qq: [{ validator: dataRules, trigger: 'blur' }],
        weixin: [{ validator: dataRules, trigger: 'blur' }]

      }

    }
  },

  mounted () {
    this.getKFInfo()
  },

  methods: {
    getKFInfo () {
      getKefuInfo().then((res) => {
        this.kefuList = res.data.kefu
        this.infoClassList = res.data.infoclass
      })
    },

    onReset () {
      this.$refs.adduserForm.resetFields()
    },

    onSubmit () {
      this.$refs.adduserForm.validate((valid) => {
        if (!valid) {
          return this.$message.error('请按照要求正确填写')
        }

        addUserRow(this.adduserForm).then((res) => {
          this.$message.success('发布成功')
          this.$router.push('/all')
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.addtitle {
  font-size: 28px;
  color: #409eff;
  span {
    padding-left: 10px;
  }
}
.addMain {
  margin-top: 30px;
  padding: 30px 0;
}

.mySelect {
  width: 120px;
}
</style>
